<template>
  <div class="_wz_cent_main _wz_viewHelp">
    <div class="_wz_viewHelp_left">
      <Menu theme="dark" @on-select="openView" :open-names="openNames" :active-name="activeName" ref="viewHelp">
        <template v-for="item,index in navList">
          <Submenu :name="item.moduleName">
            <template slot="title">
              {{item.moduleName}}
            </template>
            <template v-for="ttem in item.children">
              <template v-if="ttem.children.length == 1 && !!ttem.menuHide">
                <viewHelps :navData="ttem"></viewHelps>
              </template>
              <template v-else>
                <Submenu :name="ttem.name">
                  <template slot="title">
                    <span>{{ttem.name}}</span>
                  </template>
                  <!--循环子级 -->
                  <viewHelps :navData="ttem"></viewHelps>
                </Submenu>
              </template>
            </template>
          </Submenu>
        </template>
      </Menu>
    </div>
    <div class="_wz_viewHelp_right">
      <materialVideo v-if="!!materialData.mp4Url.length > 0" style="width: 100%;height: 100%;" :old="true" :materialData="materialData"></materialVideo>
    </div>
  </div>
</template>
<script>
  import materialVideo from "../../view/educate/public/materialVideo";
  import viewHelps from "./viewHelps";
  // menuUrl  helpVideoUrl
  export default {
    components: {
      materialVideo,//视频
      viewHelps,//列表
    },
    data() {
      return {
        navList: [],
        materialData: {
          mp4Url: '',
        },
        openNames: [],
        activeName: '',
      }
    },
    computed: {//计算属性

    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.navList = that.dataTreating(JSON.parse(sessionStorage.getItem('loginData')).navList)
      that.openNames = [that.navList[0].moduleName];
      that.activeName = JSON.stringify(that.activeNameFun(that.navList));

      that.$nextTick(() => {//执行菜单刷新
        that.$refs.viewHelp.updateOpened();
        that.$refs.viewHelp.updateActiveName();


        that.materialData = {
          mp4Url: JSON.parse(that.activeName).helpVideoUrl,
        };
      })
    },
    methods: {//执行的方法
      activeNameFun(data) {
        for (var i = 0; i < data.length; i++) {
          if(data[i].children.length > 0){
            return this.activeNameFun(data[i].children)
          }else{
            return data[i];
          }
        }
      },
      dataTreating(data) {
        var dataList = [];
        for (var i = 0; i < data.length; i++) {
          if (!!data[i].menus) {//第一级
            var list = data[i], datas = this.dataTreating(data[i].menus);
            if (datas.length > 0) {
              list.children = datas
              dataList.push(list)
            }
          } else if (!!data[i].children && data[i].children.length > 0) {//非第一级
            var list = data[i], datas = this.dataTreating(data[i].children);
            if (datas.length > 0) {
              list.children = datas;
              list.show = true;
              dataList.push(list);
            }
          } else {//最后一级 没有子集
            var list = data[i];
            list.show = false;
            if (!!list.helpVideoUrl) {
              if (list.helpVideoUrl.replace(/\s*/g, "").length > 0) {
                list.show = true;
                dataList.push(list);
              }
            }
          }
        }
        return dataList;
      },
      openView(name) {
        var that = this;
        that.materialData = {
          mp4Url: '',
        };
        that.$nextTick(function () {
          that.materialData = {
            mp4Url: JSON.parse(name).helpVideoUrl,
          };
        })
      },
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_viewHelp {
    width: 100%;
    height: 100%;
    position: relative;
    background: #1f2128;

    ._wz_viewHelp_left {
      position: absolute;
      top: 0px;
      left: 0px;
      bottom: 0px;
      width: 240px;
      overflow: auto;
    }

    ._wz_viewHelp_left::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }

    ._wz_viewHelp_right {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 240px;
      right: 0px;
    }

    .ivu-menu-dark {
      background: #1f2128;
    }

    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
      background: #1f2128;
    }

    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
      background: #1f2128;
    }

    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active {
      background: #363e4f !important;
    }
  }
</style>
